<template v-memo="[content]">
	{{ column.before || "" }}
	{{ content || "" }}
	{{ column.after || "" }}
	<v-copy v-if="!!column.copy" :content="content"></v-copy>
</template>

<script setup>
import { shallowRef, watchEffect } from "vue"
import { parseKeyPath } from "/plugins/path"
import { useDictStore } from "/store/dict"

const props = defineProps({
	column: {
		type: Object,
	},
	data: {},
	index: {
		type: Number,
	},
})

const content = shallowRef("")
let oldValue = null
const dictStore = useDictStore()
let dictList = []
let filtersList = []

watchEffect(async () => {
	// 如果没有设置 key，则直接置为空, 退出
	if (!props.column.key) {
		content.value = ""
		return
	}
	let value = parseKeyPath(props.data, props.column.key)
	// 如果没有数据，则直接置为空, 退出
	if (value === undefined || value === null || value === "") {
		content.value = ""
		return
	}
	// 如果值没有变化，则退出
	if (value === oldValue) return
	oldValue = value
	switch (typeof value) {
		case "string":
			if (typeof props.column.spacer === "string" || typeof props.column.spacer === "undefined") {
				value = value.split(props.column.spacer || ",")
			} else if (typeof props.column.spacer === "boolean" && props.column.spacer) {
				value = value.split(",")
			}
			if (!Array.isArray(value)) {
				value = [value]
			}
			break
		case "number":
			value = [value]
			break
		case "boolean":
			value = [value]
			break
		case "object":
			if (Array.isArray(value)) {
				break
			}
	}
	if (value.length === 0) {
		content.value = ""
		return
	}

	if (props.column.dict) {
		if (typeof props.column.dict === "string") {
			try {
				dictList = await dictStore.getDict(props.column.dict)
			} catch (error) {
				dictList = []
			}
		} else if (Array.isArray(props.column.dict)) {
			dictList = props.column.dict
		}
		if (!!props.column.filters !== false && !(props.column.filters)?.list?.length) {
			if (!filtersList.length) {
				filtersList = (dictList).map(item => {
					return {
						text: item[props.column.label || "name"] || item,
						value: item[props.column.value || "code"] || item,
					}
				})
			}
			props.column.filters = {
				list: filtersList,
			}
		}
		value = value.map((item) => {
			let dict = (dictList).find(dict => dict[props.column.value || "code"] == item)

			if (dict) {
				return dict[props.column.label || "name"]
			} else {
				return item
			}
		})
	}
	if (props.column.password) {
		value = value.map((item) => {
			if (item === undefined || item === null) {
				return ""
			}
			let start = props.column.password.start || 3
			let end = props.column.password.end || 4
			if (start + end > item.length) {
				start = 0
				end = 0
			}
			const starLength = props.column.password.length ?? item.length - start - end
			const star = new Array(starLength).fill("*").join("")
			return item.slice(0, start) + star + (end ? item.slice(end * -1) : "")
		})
	}
	if (typeof props.column.join === "string" || typeof props.column.join === "undefined") {
		content.value = value.join(props.column.join || ",")
	} else if (typeof props.column.join === "boolean") {
		if (props.column.join) {
			content.value = value.join(",")
		} else {
			content.value = value.join("")
		}
	}
})
</script>

<script>
export default {
	name: "table-column-default",
}
</script>

<style lang="scss" scoped></style>
